emit 向外層傳遞資訊

昨天我們提到了如何將資料由外層傳向內層，用 props 的方式可以將資料由外向內傳遞，那如果我們想要將內層的資料向外層傳遞時該怎麼做呢？這時就會使用到 emit 的方式唷！
讓我們來看看範例：

<div id="app">
  <button @click="incrementTotal">click</button>
  {{cash}}
  <button-counter @increment="incrementTotal"></button-counter>
</div>

Vue.component('buttonCounter', {
    template: `<div><button @click="incrementCounter">Click</button>增加
    {{counter}}</div>`,
    data: function() {
      return {
        counter: 1
      }
    },
    methods: {
      incrementCounter () {
        this.$emit('increment')
      }
    }
})

new Vue({
    el: '#app',
    data: {
      cash: 300
    },
    methods: {
      incrementTotal () {
        this.cash++
      }
    }
})

這裡我來講解一下，在元件內有個點擊事件，點擊後會觸發 incrementCounter 的方法，而在方法中我們利用 emit 觸發 increment，再去觸發 Vue 應用程式裡的 incrementTotal 的方法，這裡的 increment 是自定義的事件名稱，這樣就可以點擊元件裡的按鈕來增加 cash 的值了唷！

再來看看下面的範例：

Vue.component('buttonCounter', {
    template: `<div><button @click="incrementCounter">Click</button>增加{{counter}}</div>`,
    data: function() {
      return {
        counter: 10
      }
    },
    methods: {
      incrementCounter () {
        this.$emit('increment', Number(this.counter))
      }
    }
})

new Vue({
    el: '#app',
    data: {
      cash: 300
    },
    methods: {
      incrementTotal (newCount) {
        this.cash += newCount
      }
    }
})

當然，emit 也能夠傳遞參數的，要傳遞的參數只要直接加在後面就可以，而外面的方法則是要接收這個參數，這樣就可以利用元件內的 counter 的值來增加 cash 的值囉！這就是之前說的 emit out 的觀念唷！

那麼，明天再見囉！